A Telecom Network Graph On Google Maps - Using ZK Google Maps Component
Charles Pao, Engineer, Potix Corporation
June 10, 2008
Applicable to ZK 3.0.0 and later
- Applicable to zk-GMaps-2.0_4 and later
Live Demo
Introduction
There are varieties of applications using Google Map, such as mining research, traffic analysis, and demographic segmentation. Google Maps API is based on javascript. Developing Google Maps Application usually requires considerable effort due to its tedious javascript coding. It is unsafe on protecting their business logic nor for the follow-up code maintenance, neither to say the limitation of computing power on client side.
ZK has provide a sets of "JAVA-packaged" Google Maps API components for developers to develop ZK web applications. With these components, developer can easily combine the elegance and richness of ZK with other abundant web development technologies, such as Google Map.
Telecom network graph
This is a demo application using ZK Google Maps Component. It shows that it is possible to develop a quasi-telecom network graphic by using only ZUML and ZScript inside the zul file.
Every nodes (those five computer-related icons) has linking cords connected them. Once you pick up a node and drop it down on other place. The cords linked on that node will still be connected.
mapNet.zul
...
<gmarker id="mark5" lat="53.38332836757156" lng="9.31640625"
draggable="true" tooltiptext="5th staff">
<attribute name="onMarkerDrop"><![CDATA[
String color = lin1to5.getColor();
int weight = lin1to5.getWeight();
int opacity = lin1to5.getOpacity();
lin1to5.setParent(null); //remove the old cord.
Gpolyline lin1to5 = new Gpolyline();
lin1to5.setColor(color);
lin1to5.setWeight(weight);
lin1to5.setOpacity(opacity);
String arg = "" + mark1.lat +"," + mark1.lng +
",3," + event.lat +","+ event.lng + ",3";
lin1to5.setPoints(arg);
lin1to5.setParent(canvas); //add the new one put on proper position.
lin15Icon.lat=(mark1.lat + 3*event.lat)/4;
lin15Icon.lng=(mark1.lng + 3*event.lng)/4;
]]></attribute>
</gmarker>
<gmarker id="lin15Icon" lat="${(mark1.lat+3*mark5.lat)/4}"
lng="${(mark1.lng+3*mark5.lng)/4}"/>
<gpolyline id="lin1to5" color="#3333cc" opacity="100" weight="10"
points="${mark1.lat},${mark1.lng},3,${mark5.lat},${mark5.lng},3"/>
...
By listening to onMarkerDrop event of the nodes (I use <gmarker> to represent nodes), we can do proper actions when the new location of a node has been chosen. Take the fifth node (mark5) for example, when mark5 has been dropped onto a new location, all the cord (represented as <gpolyline>) connected to mark5 will be remove, and new ones are made with one of the end-points of the cord is in the new position where the mark5 has been placed.
As to the marking symbol on the cord, we use another <gmarker> to represent the marking on the cord. The tricky part is the location of marking, I use Point of Division Formula to let the marking always stay on the 1/4 portion away from node mark5, and 3/4 portion from central node mark1. It is also necessary to update the location of markings when the cord has changed to a new location.
Summary
It is a proof of concept demonstration. Most of the implementations is hard coded. At present all the linkage and the updating of those linking cords are maintained manually in the mapNet.zul file, roughly total 150 lines of code. It can be wrapped to a higher level APIs and be able to do more customization tailor for special domain applications later on. For example, developer can adopt ZK "Server Push" technology so as to update the statuses and representations of nodes and cords automatically and/or support more events such as "double click" so that end users can "drill down" the items when there are something interesting occurred.
Download
Reference
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |